<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>请输入银行预留手机号</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/feedback.css" />

		<!--图标-->
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<!--App自定义的css-->
		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
		<style>
			html {
				font-size: 100%;
				#background-color: #fff;
			}
			
			h5 {
				margin: 5px 7px;
			}
			
			.mui-card .mui-control-content {
				padding: 10px;
			}
			/*.mui-control-content {
				height: 550px;
			}*/
			
			.mui-btn {
				padding: 10px;
			}
			
			#kefu {
				font-size: 0.5rem;
				line-height: 30px;
			}
			
			header button img {
				width: 0.3rem;
			}
			
			.mui-bar {
				box-shadow: 0 0 1px rgba(255, 255, 255, 1);
			}
			
			.mui-content {
				#background-color: #fff;
			}
			
			.mui-segmented-control {
				border-bottom: 3px solid #eeeeee!important;
			}
			
			.mui-content .mui-segmented-control {
				border: none;
			}
			
			.right {
				float: right;
			}
			
			.mui-control-content {
				min-height: 540px;
			}
			
			.liangzi {
				text-align: center;
				border: 1px solid #d7d7d7;
				height: 1rem;
			}
			
			.liangzi p {
				text-align: center;
				margin-top: 8%;
				color: #333333;
			}
			
			.liangzi a img {
				width: 80%;
				margin: 10px 0px;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 10px !important;
			}
			
			.peixun_one {
				height: 0.7rem;
				width: 1.4rem;
				line-height: 0.7rem;
				background-color: #fba94f;
				color: #fff;
				text-align: center;
				border-radius: 5px 5px;
				margin-left: 10px;
				margin-top: 10% !important;
			}
			
			.mui-btn-primary {
				border: 1px solid #33C3CB;
				background: #3ccad0;
				border-radius: 10px;
				width: 100%;
				height: 0.9rem;
				font-size: 15px;
			}
			
			.top_img {
				#height: 3.2rem;
				background-color: #fff;
				overflow: hidden;
			}
			
			.top_img_one {
				display: inline-block;
				width: 1.0rem;
				margin-top: 10%;
				margin-left: 4%;
				float: left;
			}
			
			.top_img_one img {
				width: 1.0rem;
			}
			
			.top_img_two {
				display: inline-block;
				width: 4.0rem;
				height: 1.0rem;
				line-height: 1.0rem;
				float: left;
				margin-top: 11%;
				margin-left: 4%;
			}
			
			.account_detail_two {
				height: 1rem;
				border: 1px solid #d7d7d7;
				color: #333;
				background-color: #fff;
				margin-top: 5px;
				margin-bottom: 5px;
				padding-top: 0.3rem;
				padding-left: 0.2rem;
			}
			
			.account_detail_three {
				height: 1rem;
				border: 1px solid #d7d7d7;
				background-color: #fff;
				padding-top: 0.3rem;
				padding-left: 0.2rem;
			}
			
			.account_detail_four {
				height: 1rem;
				border-bottom: 1px solid #d7d7d7;
				background-color: #fff;
				padding-top: 0.3rem;
				padding-left: 0.2rem;
			}
			
			.liangzii {
				text-align: center;
				border-bottom: 1px solid #d7d7d7;
				height: 1rem;
			}
			
			.liangzii p {
				text-align: center;
				margin-top: 10%;
				color: #333333;
				font-size: 0.28rem;
			}
			
			.mui-content-padded p {
				color: #333;
				font-size: 0.28rem;
			}
			
			.mui-navigate-right {
				top: 20px;
			}
			
			.mui-content-padded {
				margin-top: 66px !important;
			}
			
			input {
				padding-top: 4%;
			}
			
			.mui-btn {
				margin-left: 10%;
			}
			
			#yanzhengBtn {
				position: absolute;
				top: 10%;
				right: 2%;
				background: #ffcc99;
				border: 0;
				border-radius: 20px;
			}
			
			.mui-input-row {
				border-top: 1px solid #ccc;
			}
			
			input[type=color],
			input[type=date],
			input[type=datetime-local],
			input[type=datetime],
			input[type=email],
			input[type=month],
			input[type=number],
			input[type=password],
			input[type=search],
			input[type=tel],
			input[type=text],
			input[type=time],
			input[type=url],
			input[type=week],
			select,
			textarea {
				line-height: 21px;
				width: 70%;
				height: 40px;
				margin-bottom: 15px;
				padding: 10px 15px;
				-webkit-user-select: text;
				border-radius: 3px;
				background-color: #fff;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-top:5%;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="ptitle">请输入银行预留手机号</h1>
		</header>

		<div class="mui-content" id="content">

			<div class="mui-content" id="content">
				<div class="top_img">

					<div class="account_detail_two" id="yinhang_ka">
						<strong style="font-size:0.32rem">请绑定持卡人本人的银行卡</strong>
					</div>

					<form class="mui-input-group">
						<div class="mui-input-row">
							<label>手机号</label><input id='phoneNum' type="number" name='password' class="mui-input password" placeholder="请输入银行预留手机号码"> <button type="button" class="verification size12 yanzhengma_ok" id="yanzhengBtn">获取验证码</button></input>
						</div>

						<div class="mui-input-row">
							<label>验证码</label><input id='verifyNum' type="number" name='password' class="mui-input password" placeholder="请输入验证码">
						</div>

					</form>

				</div>

			</div>

			<div class=" mui-content-padded ">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary " style="background-color:#169bd5;width:80% "><span>确定</span></button>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript " src="../js/app.js "></script>
	<script type="text/javascript " src="../js/constants.js "></script>
	<script type="text/javascript " src="../js/sharemethods.js "></script>
	<script type="text/javascript " src="../js/xiangyingshi.js "></script>
	<script type="text/javascript " src="../js/jquery-3.1.1.min.js "></script>
	<script>
		mui.plusReady(function() {

			var topoffset = '45px';
			if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
				// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
				topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
				document.querySelector("header").style.height = topoffset;
				document.querySelector("header").style.paddingTop = "20px";
				document.getElementById('content').style.paddingTop = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + "px";
			}

			mui.init({
				swipeBack: true, //启用右滑关闭功能
				beforeback: function() {
					//获得列表界面的webview
					var i = plus.webview.getWebviewById("subpages/tab-webview-subpage-order.html");
					if(i) {
						//触发列表界面的自定义事件（refresh）,从而进行数据刷新
						i.evalJS("getUserInfo()");
					}
					return true;
				}
			});

			mui('.mui-scroll-wrapper').scroll({
				indicators: true //是否显示滚动条
			});

			var self = plus.webview.currentWebview();
			var cardBankName = self.cardBankName;
			var cardUserName = self.cardUserName;
			var cardNo = self.cardNo;
			console.log(cardBankName);
			console.log(cardUserName);
			console.log(cardNo);

			//			console.log(blankName)

			mui(".mui-content").on("tap", ".mui-btn", function() {

			});

			document.getElementById("yanzhengBtn").addEventListener('tap', function() {
				mui.alert('输入验证码', '', function() {

				});
			});

			mui(".mui-content-padded").on("tap", ".mui-btn", function() {
				$this = $(this);

				//			var cardUserName = $("#cardUserName").val();
				//			console.log(cardUserName);
				var phoneNum = $("#phoneNum").val();
				var verifyNum = $("#verifyNum").val()
				if(!phoneNum || phoneNum == '') {
					mui.toast("请输入手机号");
					return false;
				}

				if(!verifyNum || verifyNum == '') {
					mui.toast("请输验证码");
					return false;
				}

				var sussess = function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					if(data.result == "success") {
						plus.webview.currentWebview().opener().opener().close(true);
								plus.webview.currentWebview().opener().close(true);
								plus.webview.currentWebview().close(true);
								
								mui.openWindow({
									url: 'account_setting.html',
									id: 'account_setting.html',
									show: {
										autoShow: false, //页面loaded事件发生后自动显示，默认为true
										event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
									},
									waiting: {
										autoShow: true //自动显示等待框，默认为true
									}
								});

					} else {
						mui.toast(data.msg);
					}
				};

				var data = {
					cardBankName: cardBankName,
					cardUserName: cardUserName,
					cardNo: cardNo,
					cardUserPhone: phoneNum,
					checkCode: verifyNum
				};

				commonHttpUtils(savecardinfoUrl, "put", data, sussess, error);

				//			mui.openWindow({
				//				url: 'account_setting.html',
				//				id: 'account_setting.html',
				//				extras: {
				//					phoneNum: phoneNum,
				//					verifyNum: verifyNum
				//
				//				},
				//				show: {
				//					autoShow: true, //页面loaded事件发生后自动显示，默认为true
				//				},
				//				waiting: {
				//					autoShow: true, //自动显示等待框，默认为true
				//					title: '正在加载...', //等待对话框上显示的提示内容
				//				}
				//			});
			});

		});
	</script>

</html>